<template>
  <div class="login">
    <div class="box">
      <h2>后台管理系统</h2>

      <el-row class="demo-autocomplete">
        <el-col :span="12">
          <el-autocomplete prefix-icon="el-icon-user-solid" class="inline-input" v-model="userName" :fetch-suggestions="querySearch" placeholder="请输入账号" :trigger-on-focus="false" @select="handleSelect">
            
          </el-autocomplete>
        </el-col>
      </el-row>

      <el-input prefix-icon="el-icon-s-goods" class="passWord" placeholder="请输入密码" v-model="passWord" show-password></el-input>
      <el-input prefix-icon="el-icon-s-check" class="verification" v-model="verification" placeholder="验证码"></el-input>
      <div>
        <el-button class="loginBtn" type="primary">登录</el-button>
      </div>
    </div>
  </div>
</template>
<script> export default {
  data() {
    return {
      restaurants: [],
      userName: "",      //账号
      passWord: '',     //密码
      verification: "",  //验证码
    };
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        { "value": "1235465", "address": "长宁区新渔路144号" },
        { "value": "167567562354123", "address": "上海市长宁区淞虹路661号" },
        { "value": "1345ara", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
        { "value": "1argaert2423", "address": "天山西路438号" },
        { "value": "13465wfg", "address": "上海市长宁区金钟路633号" },
        { "value": "16w35taea", "address": "上海市嘉定区曹安公路曹安路1685号" },
        { "value": "145323745", "address": "上海市普陀区同普路1435号" },
        { "value": "1346qta3rga", "address": "上海市北翟路1444弄81号B幢-107" },
        { "value": "1347qt", "address": "上海市嘉定区新郁路817号" },
        { "value": "1w6tq356q36", "address": "嘉定区曹安路1611号" },
        { "value": "1ae544", "address": "嘉定区曹安公路2383弄55号" },
      ];
    },
    handleSelect(item) {
      console.log(1+item);
    }
  },
  mounted() {
    this.restaurants = this.loadAll();
    console.log(this.userName);
  }
}
</script>
<style scoped>
.login {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url("../../../static/image/login.jpg");
  background-position: 0; /*保持图片大小、位置不变*/
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover; /* 兼容Webkit内核浏览器如Chrome和Safari */
  -o-background-size: cover; /* 兼容Opera */
  zoom: 1;
}
.box {
  width: 300px;
  height: 300px;
  margin-top: calc(100vh / 2 - 150px);
  margin-left: calc(100vw / 2 - 150px);
  border-radius: 10px;
  background-color: #fff;
  padding: 20px 40px;
  overflow: hidden;
}
.box h2 {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}
.my-autocomplete li {
  line-height: normal;
  padding: 7px;
}

.name {
  text-overflow: ellipsis;
  overflow: hidden;
}

.addr {
  font-size: 12px;
  color: #b4b4b4;
}

.highlighted .addr {
  color: #ccc;
}
.inline-input{
  width: 300px;
}
.passWord {
  margin: 20px 0;
}
.verification {
  width: 60%;
  margin-bottom: 20px;
}
.loginBtn{
  width: 100%;
}
</style>